<template>
  <div class="hold-range">
    <div class="title">{{ SortByMap[type] }}前三</div>
    <div class="list-area">
      <div v-for="(item, index) in list" :key="index" class="list-item">
        <span class="name">{{ item.name }}</span>
        <span class="strategy">{{ getName(strategyList, item.strategyId) }}</span>
        <span class="platform">
          {{ getName(platformList, item.platformId) }}
        </span>
        <span class="value">{{ dataLabel(item.holdValue) }}</span>
        <span class="hold-earnings">{{ dataLabel(item.holdEarnings) }}</span>
        <span class="hold-earnings-percent">{{ item.holdEarningsPercent }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { platformList } from '@/indexDB/initPlatform'

import { strategyList } from '@/indexDB/initStrategy'
import { useView } from '@/hooks/useView'

import type { HoldItem } from '@/indexDB/initHold'
import type { RangeType } from './useRange'
defineProps<{
  list: HoldItem[]
  type: RangeType
}>()

const { dataLabel } = useView()

const getName = (list: any[], id: string | number) => {
  const item = list.find((each) => each.id === id)
  return item?.name || '-'
}

const SortByMap: Record<RangeType, string> = {
  value: '市值',
  timeLong: '持有时长',
  earnings: '收益'
}
</script>

<style lang="scss" scoped>
.hold-range {
  margin-top: 10px;
  .title {
    margin-bottom: 5px;
    font-size: 18px;
  }
  .list-area {
    margin-top: 10px;
    .list-item {
      margin-bottom: 5px;
      padding: 10px;
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr 1fr 1fr 1fr;
      background: rgb(var(--color-primary));
      color: #fff;
      border-radius: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
